<template>
  <view>
    <W-Picker
      ref="range"
      :visible.sync="visible"
      mode="range"
      :start-year="startYear"
      :end-year="endYear"
      fields="month"
      :value="pickerValue"
      :current="true"
      :range-type="modeType"
      theme-color="#007aff"
      @confirm="onConfirm($event,'range')"
      @cancel="onCancel"
    />

    <My-Base :is-show-icon-arrow="isShowIconArrow" :icon="icon">
      <template #header>
        <view>
          {{ title || '时间选择器标题' }}
        </view>
      </template>

      <template #content>
        <view class="timer-row">
          <view @click="visible = true">
            {{ value || '请选择时间' }}
          </view>

          <u-icon
            v-show="value"
            color="#C0C4CC"
            name="close-circle-fill"
            size="{34}"
            @click="open"
          />
        </view>
      </template>
    </My-Base>
  </view>
</template>

<script>
import WPicker from '@/components/w-picker/w-picker';
import MyBase from 'common/formComponent/MyBase';

export default {
  name: 'MyTimerRange',

  components: {
    WPicker,
    MyBase
  },

  model: {
    prop: 'value',
    event: 'update:value'
  },

  props: {
    title: {
      type: String,
      default: ''
    },

    split: {
      type: String,
      default: '至'
    },

    mode: {
      type: String, // date range
      default: 'date'
    },

    modeType: {
      type: String, // date month year
      default: 'date'
    },

    startYear: { // 时间范围
      type: String,
      default: '2021'
    },

    endYear: { // 时间范围  2021
      type: String,
      default: '2030'
    },

    value: {
      type: String,
      default: ''
    },

    disabled: {
      type: Boolean,
      default: false
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    }

  },

  data() {
    return {
      visible: false
    };
  },

  computed: {
    pickerValue() {
      const value = this.value;
      const modeType = this.modeType;
      if (value) {
        let result = [];
        const res = value.split(/\s/);
        result = [res[0], res[2]];

        if (modeType === 'month') {
          result = result.map(item => item + '-01');
        } else if (modeType === 'year') {
          result = result.map(item => item + '-01-01');
        }

        return result;
      }
      return '';
    }
  },

  methods: {
    open() {
      if (!this.disabled) {
        this.upDate('');
      }
    },

    onCancel() {
    },

    upDate(value) {
      this.$emit('update:value', value);
    },

    onConfirm(e) {
      const {
        obj: {
          fday,
          fmonth,
          fyear,

          tday,
          tmonth,
          tyear
        }} = e;
      const { modeType } = this;
      let value = '';
      if (modeType === 'date') {
        value = `${fyear}-${fmonth}-${fday} ${this.split} ${tyear}-${tmonth}-${tday}`;
      } else if (modeType === 'month') {
        value = `${fyear}-${fmonth} ${this.split} ${tyear}-${tmonth}`;
      } else if (modeType === 'year') {
        value = `${fyear} ${this.split} ${tyear}`;
      }

      this.upDate(value);
    }
  }
};
</script>

<style lang="scss" scoped>
.timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
